<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div_body{
				width: 850px;
				height: 600px;
				background: darkblue;
				margin: 20px auto;
				position: relative;/*相对自己*/
				overflow: hidden;
			}
			.div_tiao{
				width: 3400px;
				height: 600px;
				position: absolute;
			}
			.div_tiao>img{
				width: 850px;
				height: 600px;
				float: left;
			}
			.an{
				/*width: 100px;*/
		        height: 30px;
		        position: absolute;
		        bottom: 0px;
		        left: 50%;
		        margin-left: -50px;
		        z-index: 2;/*让圆点显示在轮播图上面*/
			}
			.an>div{
				/*圆点的一些样式*/
		        width:20px;
		        height: 20px; 
		        float: left;
		        border-radius: 50%;
		        margin:5px 6px;
		        background-color: rgba(7,17,27,0.4);
		        box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
        		cursor:pointer;
			}
			.an1{
				background-color: #fff !important;
			}
		</style>
	</head>
	<body>
		<div class="div_body">
			<!--<div class="div_tiao">
				<img src="static/img/1.jpg">
				<img src="static/img/2.jpg">
				<img src="static/img/3.jpg">
				<img src="static/img/1.jpg">
			</div>-->
			<div class="an">
				<!--<div></div>
				<div></div>
				<div></div>-->
			</div>
		</div>
		
		
		<script src="bck/static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/jqery_cycle.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$(".div_body").cycle(
					["static/img/1.jpg","static/img/2.jpg","static/img/3.jpg","static/img/4.jpg"],1000
				);
			});
			/*$(document).ready(function(){
				var a = 0;
				
				setIntCode = setInterval(function(){
					a++;
					if(a>3)
					{
						$(".div_tiao").animate({"left":0+"px"},0);
						a=1;
					}
					if(a==3)
					{
						$("[code='1']").addClass("an1");
						$("[code='1']").siblings().removeClass("an1");
					}
					console.log(a);
					$("[code='"+(a+1)+"']").addClass("an1");
					$("[code='"+(a+1)+"']").siblings().removeClass("an1");
					$(".div_tiao").animate({"left":(a*-850)+"px"},1000);
				},3000);
				
				for (var b = 0;b<$(".div_tiao>img").length-1;b++) {
					$(".an").append("<div code='"+(b+1)+"'></div>")
				}
				$(".an>div:nth-child(1)").addClass("an1");
				
				$(".an>div").click(function(){
					a = parseInt($(this).attr("code"))-1;
					$(".div_tiao").animate({"left":(a*-850)+"px"},1000);
					$(this).addClass("an1");
					$(this).siblings().removeClass("an1");
				});
				$(".div_body").mouseenter(function(){//鼠标移入了
					clearInterval(setIntCode);
				});
				$(".div_body").mouseleave(function(){//先鼠标移入才可以鼠标移出
					setIntCode = setInterval(function(){
						a++;
						if(a>3)
						{
							
							$(".div_tiao").animate({"left":0+"px"},0);
							a=1;
						}
						
						$(".div_tiao").animate({"left":(a*-850)+"px"},1000);
					},3000);
				});
			});*/
		</script>
	</body>
</html>
